<template>
<div>
  <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
    <el-form-item label="项目名称" prop="projectId">
      <el-select v-model="queryParams.projectId" placeholder="请选择" @change="getData">
        <el-option v-for="item in projectList"
                    :key="item.projectId"
                    :label="item.projectName"
                    :value="item.projectId">
        </el-option>
      </el-select>
    </el-form-item>
  <div v-show="flag" ref="main" style="width: 100%; height: 800px;"></div>
  </el-form>
</div>
</template>
<script>
//引入echarts
import * as echarts from 'echarts';
import {listProjectAllByUserId} from "@/api/project/project";
import {listProblemStatistics} from "@/api/prodata/problemStatistics";
export default {
  name: "index",
  data() {
    return {
      //图表容器对象
      myChart: null,
      //图表各项属性
      option: null,
      projectList:[],
      // 查询参数
      queryParams: {
        projectId: null
      },
      flag:true
    }
  },
  created() {
    this.getProjectList();
  },
  mounted() {
    //1, 初始化图表容器
    this.myChart = echarts.init(this.$refs.main);

    //2, 图表各项属性
    this.option = {
      title: {
        text: ' 项目问题统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '活动名称',
          type: 'pie',
          radius: ['30%', '50%'],
          data: [
          ],
          label:{
            formatter:'{b} {c} \n {d}%'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    //配置项
    this.myChart.setOption(this.option);
  },
  methods:{
    /** 查询项目下拉列表 */
    getProjectList() {
      listProjectAllByUserId().then((r) => {
        this.projectList = r.data
        this.queryParams.projectId = r.data[0].projectId
        this.getData()
      })
    },
    getData(){
      listProblemStatistics(this.queryParams)
        .then(response => {
          if (response.data.length === 0){
            this.flag = false
            return
          }else {
            this.flag = true
          console.log(response)
          this.option.series[0].data = response.data;

          this.myChart.setOption(this.option);}
        })
        .catch(() => {})
    }
  }
}
</script>



<style scoped lang="scss">

</style>
